<template>
  <div class="home">
    <div class="search-div flex justify-content-center align-items-center">
      <div class="search-input-div">
        <div
          class="search-input flex justify-content-center align-items-center"
        >
          <el-input
            placeholder="搜索搜索关键词、行业、公司、股票（多关键词可空格分开）"
            @keyup.enter.native="toSearch"
            v-model="searchKey"
          >
          </el-input>
          <el-button type="primary" class="search-btn" @click="toSearch">
            <span class="flex justify-content-center align-items-center">
              <img src="../assets/images/finder.png" /><span
                style="font-size: 15px"
                >查一查</span
              >
            </span>
          </el-button>
        </div>
        <div class="flex hot-search">
          <div>24小时热搜:</div>
        </div>
      </div>
    </div>

    <div class="filetype">
      <div
        class="filetype-item"
        v-for="(item, index) in fileTypeList"
        :key="item.id"
        :style="
          'background-color:' +
          fileTypeStyle[index]['bgcolor'] +
          ';' +
          'background-image:url(' +
          fileTypeStyle[index]['bgimage'] +
          ')'
        "
      >
        <a :href="'/filetype/' + item.id"></a>
        <div>{{ item.name }}</div>
        <div class="file-type-desc">{{ item.description }}</div>
      </div>
    </div>

    <div class="content-wrap" v-if="fileList.length">
      <div class="files">
        <div v-if="fileTypeList.length">
          {{ fileTypeList[$route.params.id - 1].name }}
        </div>
        <div class="file" v-for="item in fileList" :key="item.id">
          <img class="file-cover" :src="item.share_url" alt="" />
          <div class="file-info">
            <a
              class="file-name"
              :title="item.name"
              target="_blank"
              :href="'/detail/' + item.id"
              >{{ item.name }}</a
            >
            <div class="file-tag">
              <div class="tag-item">{{ item.time_text }}</div>
              <div class="tag-item" v-if="item.organization">
                {{ item.organization.name }}
              </div>
              <div class="tag-item">{{ item.page_count }}页</div>
            </div>
            <div file-tag>
              <a class="tag-industry" href="" v-if="item.industry">{{
                item.industry.name
              }}</a>
            </div>
          </div>
        </div>
        <div class="page-container">
          <el-pagination
            background
            layout="prev, pager, next, jumper"
            :page-size.sync="currentPageSize"
            :current-page.sync="currentPage"
            :total="listTotal"
            @current-change="pageChange"
          ></el-pagination>
        </div>
      </div>
      <div class="options"></div>
    </div>
  </div>
</template>

<script>
import { getTypeList, getFileListOfType } from "@/api/index.js";
import { mapGetters } from "vuex";

export default {
  data() {
    return {
      searchKey: "",
      fileTypeList: [],
      fileTypeStyle: [
        {
          bgcolor: "#f98a80",
          bgimage: "https://static.fxbaogao.com/pub/images/eso-home-hy.png",
        },
        {
          bgcolor: "#5897ff",
          bgimage:
            "https://static.fxbaogao.com/pub/images/eso-home-company.png",
        },
        {
          bgcolor: "#f7ad59",
          bgimage: "https://static.fxbaogao.com/pub/images/eso-home-hgcl.png",
        },
        {
          bgcolor: "#f6c477",
          bgimage: "https://static.fxbaogao.com/pub/images/seo-home-zgs.png",
        },
        {
          bgcolor: "#7b79fa",
          bgimage: "https://static.fxbaogao.com/pub/images/eso-home-cb.png",
        },
        {
          bgcolor: "#00c4f9",
          bgimage: "https://static.fxbaogao.com/pub/images/eso-home-hyjy.png",
        },
        {
          bgcolor: "#df9d5f",
          bgimage: "https://static.fxbaogao.com/pub/images/seo-home-qhyj.png",
        },
        {
          bgcolor: "#3ac9b4",
          bgimage: "https://static.fxbaogao.com/pub/images/seo-home-jglh.png",
        },
      ],
      fileList: [],
      currentPage: 0,
      currentPageSize: 10,
      listTotal: 0,
    };
  },
  head() {
    return {
      title:
        "【报告查一查】专业研报平台丨行业报告丨行业研究丨调查研究报告丨行业分析报告丨行业数据报告丨股票报告",
      meta: [
        {
          hid: "description",
          name: "description",
          content:
            "报告查一查作为专业研报平台,收录最新、最全行业报告,可免费阅读各类行业报告,智能分类搜索,支持全文关键词匹配,可下载PDF格式报告",
        },
        {
          hid: "keywords",
          name: "keywords",
          content:
            "行业报告,行业研究,调查研究报告,行业分析报告,行业数据报告,股票报告,券商研报,管理咨询",
        },
      ],
    };
  },
  computed: {
    ...mapGetters(["sid", "is_vip"]),
  },
  components: {},
  created() {
    if (process.client) {
      getTypeList()
        .then((res) => {
          console.log(res);
          this.fileTypeList = res.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
      this.getFiles();
    }
  },
  methods: {
    toSearch() {},
    pageChange(page) {
      this.currentPage = page;
      this.getFiles();
    },

    getFiles() {
      let typeId = this.$route.params.id;
      getFileListOfType({
        id: typeId,
        page: this.currentPage,
        pageSize: this.currentPageSize,
      })
        .then((res) => {
          this.fileList = res.data.files;
          this.listTotal = res.data.total;
        })
        .catch((err) => {});
    },
  },
};
</script>

<style lang="less" scoped>
.home {
  padding-bottom: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
// search-div
.search-input-div {
  height: 150px;
}

.slogan {
  margin-top: 60px;
  width: 300px;
}

.slogan img {
  width: 100%;
}

.search-input {
  margin-top: 30px;
}

.el-input {
  max-width: 600px;
  width: 500px;
}

/deep/ .el-input__inner {
  height: 44px;
}

.hot-search {
  font-size: 14px;
  margin-top: 30px;
}

.el-button {
  z-index: 117;
  height: 44px;
  margin-left: -4px;
  background-color: rgba(70, 125, 208, 1);
  width: 144px;
  justify-content: center;
  align-items: flex-start;
  border-top-left-radius: 0;
  border-top-right-radius: 4px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 4px;
}

.filetype {
  max-width: 1300px;
  width: calc(100% - 80px);
  display: flex;
  font-size: 14px;
  justify-content: space-between;
  align-items: center;
}

.filetype-item {
  min-width: 120px;
  height: 90px;
  background-repeat: no-repeat;
  background-position: 100% 100%;
  font-size: 16px;
  color: white;
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  align-items: center;
  justify-content: center;
  position: relative;
}

.filetype-item a {
  position: absolute;
  width: 100%;
  height: 100%;
}

.file-type-desc {
  font-size: 14px;
  margin-top: 10px;
}

.content-wrap {
  margin-top: 30px;
  background-color: white;
  max-width: 1300px;
  width: calc(100% - 80px);
  display: flex;
  flex-direction: column;
}

.files {
  display: flex;
  flex-direction: column;
  max-width: 66.67%;
  padding: 20px;
  box-sizing: border-box;
  font-size: 18px;
}

.file {
  width: 100%;
  display: flex;
  padding: 20px 0;
  border-bottom: 1px solid #e9e9e9;
}

.file-cover {
  z-index: 1;
  width: 108px;
  height: 146px;
  flex: 0 0 108px;
  margin: 0 24px 0 10px;
  box-shadow: 0 0 8px 0 rgba(39, 66, 107, 0.1);
  vertical-align: middle;
  border-style: none;
}

.file-name {
  width: 100%;
  color: #333;
  font-size: 18px;
  line-height: 24px;
  text-align: justify;
  text-decoration: none;
  background-color: transparent;
  outline: none;
  cursor: pointer;
  transition: color 0.3s;
}

.file-tag {
  color: #999;
  padding: 10px 0;
  line-height: 20px;
  font-size: 13px;
  display: flex;
}

.tag-industry {
  padding: 4px 10px;
  min-width: 78px;
  font-size: 14px;
  text-align: center;
  background-color: #e4edff;
  height: 27px;
  line-height: 27px;
  border-radius: 13px;
  color: #1567fd;
  text-decoration: none;
  outline: none;
  box-sizing: border-box;
}

.tag-item {
  margin-right: 8px;
}
.page-container {
  margin-top: 20px;
  align-self: center;
}

.options {
  max-width: 33.33%;
}
</style>
